<template>
  <div class="form-statistics-container">
    <div class="qs-box">
      <div class="top-box">
        <div class="label-box">
          <span class="index">{{formItem.labelIndex}}、</span>
          <span class="label">{{formItem.label}}</span>
          <span class="cmp-type">{{`[${formItem.compName}]`}}</span>
        </div>
        <div class="writer-num">收集结果：{{formItem.writerNum}}条
          <div>
            <el-button v-if="!props.showAll" size="small" type="" @click="handleShowAll">查看更多</el-button>
            <el-button-group class="model-type-group">
              <el-tooltip
                effect="dark"
                content="表格"
                placement="top"
              >
                <el-button :class="curModelIndex == 0 ? 'model-type-active':''" size="small" type="" @click="answerMoelCheck(0)"><i class="iconfont">&#xe641;</i></el-button>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="饼图"
                placement="top"
              >
                <el-button :class="curModelIndex == 1 ? 'model-type-active':''" size="small" type="" @click="answerMoelCheck(1)"><i class="iconfont">&#xeb95;</i></el-button>
              </el-tooltip>
              <el-tooltip
                effect="dark"
                content="柱状图"
                placement="top"
              >
                <el-button :class="curModelIndex == 2 ? 'model-type-active':''" size="small" type="" @click="answerMoelCheck(2)"><i class="iconfont">&#xe60b;</i></el-button>
              </el-tooltip>
            </el-button-group>
          </div>
        </div>
      </div>
      <div class="table" v-if="curModelIndex == 0">
        <el-table max-height="400px" :data="props.showAll ? formItem.result : formItem.result.slice(-4)" style="width: 100%" border>
          <el-table-column prop="label" label="选项" align="center"/>
          <el-table-column prop="writerChoosedNum" label="计数" align="center"/>
          <el-table-column prop="percent" label="比例（%）" align="center">
            <template #default="{row}">
              <span>{{`${row.percent}%`}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 图表 -->
      <div class="chart-box" v-if="curModelIndex == 1">
        <PieChart :formItem="formItem"/>
      </div>
      <div class="chart-box" v-if="curModelIndex == 2">
        <BarChart :formItem="formItem"/>
      </div> 
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import PieChart from "./PieChart.vue"
import BarChart from "./BarChart.vue"
const props = defineProps({
  formItem: {
    type: Object,
  },
  showAll: {
    type: Boolean,
    default: false
  },
})
const formItem = computed(()=>{return props.formItem})
const emit = defineEmits(['handleShowAll'])
const handleShowAll = () => {
  emit('handleShowAll', formItem.value)
}
const curModelIndex = ref(0)
// 切换视图模式 0表格 1饼图 2柱状图
const answerMoelCheck = (type) => {
  curModelIndex.value = type
}
</script>
<style scoped lang='scss'>
.model-type-active{
  background: $mainColor;
  color: #fff;
}
</style>